<template>
  <div>
    <a-drawer :visible="modalVisible" width="90%" @close="handleClose">
      <a-divider orientation="left">导入材料申请明细</a-divider>
      <button   @click="save(dataSource)" style="width: 80px;height:30px;margin-bottom: 5px;color: #d1e9ff;background-color: #52c41a;border:0px"  icon="ios-add">
        提交
      </button>
      <a-table style="margin-top: 30px" ref="table" size="default" :multiple="false" :operator="operator"  :pagination="false" :columns="columns"  :data-source="inputData"
               :scroll="{x:columns.length*150,y:columns.length*25}">
        <span slot="number" slot-scope="text, record">
          <a-tag color="#108ee9" @click="$refs.resum.handleShow(record)">{{ text }}</a-tag>
        </span>

        <template v-for="col in editSlots" :slot="col" slot-scope="text, record, index" :row-selection="rowSelection">
          <div :key="col">
            <a-date-picker  style="width: 100%"  v-if="editingKey=== record.materialPlanId&&col=='receivedDate'" value-format='YYYY-MM-DD' format='YYYY-MM-DD' type="date" v-model="receivedDate"  @change="handleChange(receivedDate,record.materialPlanId, col,record)" > </a-date-picker>
            <a-select  v-else-if ="editingKey=== record.materialPlanId&&col=='caseType'" style="width: 150px;" showSearch optionFilterProp="children"   v-model="caseType" @change="handleChange(caseType,record.materialPlanId, col,record)">
              <a-select-option  v-for ="item in dicList" :key="item.name" :value="item.name">
                {{item.name}}
              </a-select-option>
            </a-select>
            <a-select  v-else-if ="editingKey=== record.materialPlanId&&col=='vendorName'" style="width: 150px;"  showSearch optionFilterProp="children"  v-model="vendorName"   @change="handleChange(vendorName, record.materialPlanId, col,record)"  >
              <a-select-option  v-for ="item1 in supplierList" :key="item1.supplierName" :value="item1.supplierName" >
                {{item1.supplierName}}
              </a-select-option>
            </a-select>
            <a-input v-else-if="editingKey=== record.materialPlanId&&col=='purchaseCount'" style="margin: -5px 0" :value="text" @change="(e) => handleChange(e.target.value, record.materialPlanId, col,record)" />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record,index">
          <template v-if="record.orderflg==='0'">
            <a @click="() => edit(record,record.materialPlanId)">编辑</a>
          </template>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>
<script>
  import api from '../../material/app/js/api'
    export default {
      //import引入的组件需要注入到对象中才能使用
      components: {
      },
      props: {
        detailsParams: {}
      },
      data() {
        //这里存放数据
        let operator = []
        operator.push({
          name: '提交',
          icon: 'import',
          that: this,
          handler: function (table, that) {
            that.save(that.dataSource)
          }
        })
        return {
          api: Object.assign(api, this.api),
          //列表初始化查询参数
          queryParam: {},
          flag: false,
          modalVisible: false,
          editingKey: '',
          scorykey: '',
          supplierId: '',
          value: '',
          caseType: '',
          vendorName: '',
          receivedDate: '',
          code: '',
          dicList: [],
          inputData: [],
          columns: [{
            title: '编号',
            align: 'center',
            dataIndex: 'materialPlanId',
            scopedSlots: {
              customRender: 'materialPlanId'
            }
          },
            {
              title: '工程包名称',
              align: 'center',
              dataIndex: 'packageName',
              scopedSlots: {
                customRender: 'packageName'
              }
            },
            {
              title: '工程包代码',
              align: 'center',
              dataIndex: 'packageNo',
              scopedSlots: {
                customRender: 'packageNo'
              }
            },
            {
              title: '专业包名称',
              align: 'center',
              dataIndex: 'majorName',
              scopedSlots: {
                customRender: 'majorName'
              }
            },
            {
              title: '专业包代码',
              align: 'center',
              dataIndex: 'majorCode',
              scopedSlots: {
                customRender: 'majorCode'
              }
            },
            {
              title: '物料代码',
              align: 'center',
              dataIndex: 'materialCode',
              scopedSlots: {
                customRender: 'materialCode'
              }
            },
            {
              title: 'WBS代码',
              align: 'center',
              dataIndex: 'materialWbsCode',
              scopedSlots: {
                customRender: 'materialWbsCode'
              }
            },

            {
              title: '设备、材料名称',
              align: 'center',
              dataIndex: 'materialName',
              scopedSlots: {
                customRender: 'materialName'
              }
            },
            // {
            //   title: '型号/规格',
            //   align: 'center',
            //   dataIndex: 'materiaSpecs',
            //   scopedSlots: {
            //     customRender: 'materiaSpecs'
            //   }
            // },
            {
              title: '项目名称',
              align: 'center',
              dataIndex: 'materiaSpecs',
              scopedSlots: {
                customRender: 'materiaSpecs'
              }
            },
            {
              title: '技术参数或技术说明',
              align: 'center',
              dataIndex: 'technicalData',
              scopedSlots: {
                customRender: 'technicalData'
              }
            },
            {
              title: '层级号',
              align: 'center',
              dataIndex: 'levelNo',
              scopedSlots: {
                customRender: 'levelNo'
              }
            },
            {
              title: '区域',
              align: 'center',
              dataIndex: 'materialArea',
              scopedSlots: {
                customRender: 'materialArea'
              }
            },
            {
              title: '系统',
              align: 'center',
              dataIndex: 'materialUse',
              scopedSlots: {
                customRender: 'materialUse'
              }
            },
            {
              title: '计量单位',
              align: 'center',
              dataIndex: 'measurementUnit',
              scopedSlots: {
                customRender: 'measurementUnit'
              }
            },
            {
              title: '100预算工程量',
              align: 'center',
              dataIndex: 'costQuantity100',
              scopedSlots: {
                customRender: 'costQuantity100'
              }
            },
            {
              title: '200预算工程量',
              align: 'center',
              dataIndex: 'costQuantity200',
              scopedSlots: {
                customRender: 'costQuantity200'
              }
            },
            {
              title: '损耗率',
              align: 'center',
              dataIndex: 'loss',
              scopedSlots: {
                customRender: 'loss'
              }
            },
            {
              title: '采购计划量',
              align: 'center',
              dataIndex: 'planPurchaseCount',
              scopedSlots: {
                customRender: 'planPurchaseCount'
              }
            },
            {
              title: '在途',
              align: 'center',
              dataIndex: 'ztPurchaseCount',
              scopedSlots: {
                customRender: 'ztPurchaseCount'
              }
            },
            {
              title: '到货',
              align: 'center',
              dataIndex: 'dhPurchaseCount',
              scopedSlots: {
                customRender: 'dhPurchaseCount'
              }
            },
            {
              title: '本次采购量',
              align: 'center',
              dataIndex: 'purchaseCount',
              scopedSlots: {
                customRender: 'purchaseCount'
              }
            },
            {
              title: '计划到货时间',
              align: 'center',
              dataIndex: 'receivedDate',
              scopedSlots: {
                customRender: 'receivedDate'
              }

            },
            {
              title: '单据类型',
              align: 'center',
              dataIndex: 'caseType',
              scopedSlots: {
                customRender: 'caseType'
              }
            },
            {
              title: '班组',
              align: 'center',
              dataIndex: 'vendorName',
              scopedSlots: {
                customRender: 'vendorName'
              }
            },
            {
              title: '剩余采购量',
              align: 'center',
              dataIndex: 'endPurchaseCount',
              scopedSlots: {
                customRender: 'endPurchaseCount'
              }
            },
            {
              title: '备注',
              align: 'center',
              dataIndex: 'remark',
              scopedSlots: {
                customRender: 'remark'
              }
            },
            {
              title: '操作',
              align: 'center',
              dataIndex: 'orderflg',
              scopedSlots: {
                customRender: 'operation'
              }
            }
          ],
          operator: operator,
          dataSource: [],
          dataValue: {},
          supplierList: [],
          editSlots: ['purchaseCount', 'receivedDate', 'caseType', 'vendorName'],
          version: '',
          projectId: '',
          propTableData: {
            sel: null, // 选中行
            col: []
          },
          data: []
        }
      },
      methods: {
        handleShow(data ,projectId ,version) {
          this.isEdit = false
          var that = this
          setTimeout(() => {
            that.getecclData(data)
            that.queryParam['projectId'] = projectId
            that.queryParam['version'] = version
            that.queryParam['excelKey'] = data
          }, 100)
          that.modalVisible = true
        },
        getecclData(excelKey) {
          this.http.post(this, {
            url: this.api.materials.getexcelPurseDetail,
            data: {
              excelKey: excelKey
            },
            success: function (me, data) {
              me.inputData = data
              me.dataSource = data
            }
          })
        },
        handleClose() {
          this.modalVisible = false
        },
        handleChange(value, key, column, record) {
          const newData = [...this.dataSource]
          const target = newData.filter((item) => key === item.materialPlanId)[0]
          record[column] = value
          if (target != undefined && target) {
            target[column] = value
            target['materialCode'] = record['materialCode']
            target['materialWbsCode'] = record['materialWbsCode']
            this.dataSource = newData
          } else {
            const newData2 = {}
            newData2.materialPlanId = key
            newData2[column] = value
            newData2['materialCode'] = record['materialCode']
            newData2['materialWbsCode'] = record['materialWbsCode']
            this.dataSource.push(newData2)
          }
        },
        edit(record, key) {
          this.receivedDate = ''
          this.caseType = ''
          this.vendorName = ''
          if (this.editingKey === key) {
            this.editingKey = ''
          } else {
            this.editingKey = key
          }
        },
        save(dataSource) {
          const jsonData = JSON.stringify(dataSource)
          const projectIds = this.queryParam.projectId
          const versionIds = this.queryParam.version
          const  excelKey = this.queryParam.excelKey
          this.http.post(this, {
            url: this.api.materials.applyPurchase,
            data: {
              dataArray: jsonData,
              projectId: projectIds,
              versionId: versionIds,
              excelKey: excelKey
            },
            success: function (me, data) {
              me.$message.success('操作成功')
              // me.$refs.table.refresh()
              me.$emit('excelTab')
              me.handleClose()
            }
          })
        },
        cancel(key) {
          const newData = [...this.dataSource]
          const target = newData.filter((item) => key === item.key)[0]
          this.editingKey = ''
          if (target) {
            delete target.editable
            this.dataSource = newData
          }
        }
      },
      //生命周期 - 创建完成（可以访问当前this实例）
      created() {
        this.http.get(this, {
          url: this.api.purchases.getCaseTypeDate,
          data: {
            docTypes: 'docTypes'
          },
          success: function (me, data) {
            me.dicList = data
          }
        })
        this.http.get(this, {
          url: this.api.purchases.getallSupplier,
          data: {
            docTypes: 'docTypes'
          },
          success: function (me, data) {
            me.supplierList = data
          }
        })
      }
    }
</script>

<style lang="scss" scoped>
  //@import url(); 引入公共css类
</style>

